<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  ~ Copyright (c) 2022-2023 Contributors to the Eclipse Foundation
  ~
  ~ See the NOTICE file(s) distributed with this work for additional
  ~ information regarding copyright ownership.
  ~
  ~ This program and the accompanying materials are made available under the
  ~ terms of the Eclipse Public License 2.0 which is available at
  ~ http://www.eclipse.org/legal/epl-2.0, or the Apache Software License 2.0
  ~ which is available at https://www.apache.org/licenses/LICENSE-2.0.
  ~
  ~ SPDX-License-Identifier: EPL-2.0 OR Apache-2.0
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<link
    href="https://fonts.googleapis.com/icon?family=Material+Icons"
    rel="stylesheet"
/>

<mat-toolbar class="header">
    <button mat-icon-button [disabled]="this.currentPath==this.baseDir" class="homeButton">
        <mat-icon class="menuIcon" (click)="goRoot()">home</mat-icon>
    </button>
    <button mat-icon-button [disabled]="this.currentPath==this.baseDir" class="backButton">
        <mat-icon class="menuIcon" (click)="navigateBack()">arrow_back</mat-icon>
    </button>
    <span class="path">{{currentPath || SEPARATOR}}</span>
    <span class="toolbarRight">
    <button mat-icon-button class="newFolderButton">
        <mat-icon class="menuIcon" (click)="createNewFolder()">create_new_folder</mat-icon>
    </button>
    <button mat-icon-button class="menuButton" [matMenuTriggerFor]="toolbarMenu">
        <mat-icon class="menuIcon">more_vert</mat-icon>
    </button>
        </span>
</mat-toolbar>


<div *ngIf="listView">
    <table mat-table [dataSource]="dirsAndFilesList" (matSortChange)="sortData($event, true)" matSort
           class="mat-elevation-z0">

        <ng-container matColumnDef="isFile">
            <th mat-header-cell *matHeaderCellDef mat-sort-header></th>
            <td mat-cell *matCellDef="let item">
                <mat-icon *ngIf="item.isFile">insert_drive_file</mat-icon>
                <mat-icon *ngIf="!item.isFile" (click)="openFolder(item)">folder</mat-icon>
            </td>
        </ng-container>

        <ng-container matColumnDef="name">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> Name</th>
            <ng-container *matCellDef="let item">
                <td mat-cell class="pointer" (contextmenu)="onContextMenu($event, item)"
                    (click)="openFolder(item)"> {{item.name}} </td>
            </ng-container>
        </ng-container>

        <ng-container matColumnDef="size">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> Size</th>
            <td mat-cell *matCellDef="let item">
                <ng-container>{{getSize(item)}}</ng-container>
            </td>
        </ng-container>

        <ng-container matColumnDef="modified">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> Last modified</th>
            <td mat-cell *matCellDef="let item"> {{item.modified}} </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="COLUMNS"></tr>
        <tr mat-row *matRowDef="let row; columns: COLUMNS;"></tr>
    </table>
</div>

<div *ngIf="!listView">
    <mat-grid-list cols="7" rowHeight="1:1">
        <mat-grid-tile *ngFor="let item of dirsAndFilesList" class="iconAndTextTile">
            <div (click)="openFolder(item)" class="iconAndText"
                 (contextmenu)="onContextMenu($event, item)">
                <mat-icon class="bigIcons" *ngIf="!item.isFile" matTooltipShowDelay=750 matTooltipPosition="above"
                          matTooltip="{{item.modified}}">folder
                </mat-icon>
                <mat-icon class="bigIcons" *ngIf="item.isFile" matTooltipShowDelay=750 matTooltipPosition="above"
                          matTooltip="{{getSize(item)}} | {{item.modified}}">insert_drive_file
                </mat-icon>
                <span class="bigIconsText">{{item.name}}</span>
            </div>
        </mat-grid-tile>
    </mat-grid-list>
</div>


<div #contextMenuTrigger="matMenuTrigger"
     style="visibility: hidden; position: fixed"
     [style.left]="contextMenuPosition.x"
     [style.top]="contextMenuPosition.y"
     [matMenuTriggerFor]="contextMenu">
</div>
<mat-menu #contextMenu="matMenu">
    <ng-template matMenuContent let-item="item">
        <button mat-menu-item (click)="openRenameDialog(item)">
            <mat-icon>edit</mat-icon>
            <span><strong>Rename:</strong> {{item.name}}</span></button>
        <mat-divider></mat-divider>
        <button mat-menu-item (click)="delete(item)">
            <mat-icon>delete</mat-icon>
            <span><strong>Delete:</strong> {{item.name}}</span></button>
        <mat-divider></mat-divider>
        <button mat-menu-item [matMenuTriggerFor]="moveMenu" [matMenuTriggerData]="{self: item}">
            <mat-icon>open_with</mat-icon>
            <span><strong>Move To:</strong></span>
        </button>
    </ng-template>
</mat-menu>

<mat-menu #moveMenu="matMenu">
    <ng-template matMenuContent let-self="self">
        <ng-container *ngFor="let item of getFolders(self); let first = first; let last = last">
            <button mat-menu-item (click)="move(self, item)">{{item || SEPARATOR}}</button>
            <mat-divider [inset]="false" *ngIf="!last"></mat-divider>
        </ng-container>
    </ng-template>
</mat-menu>

<mat-menu #toolbarMenu="matMenu">
    <ng-template matMenuContent>
        <button mat-menu-item (click)="getAllDirsAndFiles()">
            <mat-icon>refresh</mat-icon>
            <span><strong>Refresh</strong></span>
        </button>
        <mat-divider></mat-divider>
        <button mat-menu-item (click)="listView=!listView" *ngIf="listView">
            <mat-icon>view_comfy</mat-icon>
            <span><strong>Grid View</strong></span>
        </button>
        <button mat-menu-item (click)="listView=!listView" *ngIf="!listView">
            <mat-icon>storage</mat-icon>
            <span><strong>List View</strong></span>
        </button>
    </ng-template>
</mat-menu>
